import React from "react";
import {Table, Breadcrumb, Button, Input, Tag, message} from 'antd';
import CustomLayout from "../../../components/CustomLayout/customLayout";
import {_queryOrdersByStatusPageInfo} from "../../../utils/apiList";
import PreviewOrder from "./previewOrder";

const {Search} = Input;

class CompletedOrders extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabData: [],
            pageSize: 10,
            pageNum: 1,
            total: 0,
            tabLoading: false,
        };
        this.previewOrderRef = React.createRef();
    }

    componentDidMount() {
        this.loadTable()
    }


    loadTable() {
        const {pageNum, pageSize} = this.state;
        this.setState({tabLoading: true});
        _queryOrdersByStatusPageInfo({pageNo: pageNum, pageSize, orderStatus: 'FINISHED'}).then((res) => {
            if (res.data.success) {
                this.setState({
                    tabData: res.data.data.list ? res.data.data.list : [],
                    total: res.data.data.total ? res.data.data.total : [],
                    tabLoading: false,
                })
            } else {
                message.error(<b>{res.data.msg}</b>, 3);
            }
        }).catch(error => {
            message.error(<b>请求失败！</b>, 3);
        });
    }

    changePageSize(pageSize, current) {
        this.setState({pageSize, pageNum: 1}, () => this.loadTable())
    }

    changePage(current) {
        this.setState({pageNum: current}, () => this.loadTable())
    }

    addRecord = (record) => {

    };

    updateRecord = (record) => {

    };

    render() {
        const {tabData, pageSize, pageNum, total, tabLoading} = this.state;
        const columns = [
            {
                title: '订单号',
                dataIndex: 'orderNumber',
                key: 'orderNumber',
                width: 200,
                fixed: 'left',
                align: 'center'
            },
            {
                title: '借衣人',
                dataIndex: 'lendPerson',
                key: 'lendPerson',
                width: 150,
                align: 'center'
            },
            {
                title: '归还日期',
                dataIndex: 'returnTime',
                key: 'returnTime',
                align: 'center'
            },
            {
                title: '明星',
                dataIndex: 'star',
                key: 'star',
                width: 150,
                align: 'center'
            },
            {
                title: '主题',
                dataIndex: 'photoTheme',
                key: 'photoTheme',
                width: 200,
                align: 'center'
            },
            {
                title: '反馈',
                dataIndex: 'feedback',
                key: 'feedback',
                align: 'center'
            },
            {
                title: '查看详情',
                key: 'fix',
                width: 150,
                align: 'center',
                render: (text, record) => (
                    <Button type="primary" onClick={() => this.previewOrderRef.current.showModal(record)}>进入</Button>),
            },
        ];
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            onSelect: (record, selected, selectedRows) => {
                console.log(record, selected, selectedRows);
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
                console.log(selected, selectedRows, changeRows);
            },
        };
        return (
            <CustomLayout>
                <Breadcrumb style={{margin: '16px 0'}}>
                    <Breadcrumb.Item>预约租借管理</Breadcrumb.Item>
                    <Breadcrumb.Item>已完成订单</Breadcrumb.Item>
                </Breadcrumb>
                <div className={'App-Section'}>
                    <div style={{margin: 10}}>
                        <Button style={{marginRight: 10}} type="primary">批量导出</Button>
                    </div>
                    <Table
                        bordered
                        columns={columns}
                        rowKey={'id'}
                        loading={tabLoading}
                        rowSelection={rowSelection}
                        // expandedRowRender={expandedRowRender}
                        dataSource={tabData}
                        pagination={{
                            showSizeChanger: true,
                            showQuickJumper: false,
                            showTotal: () => `共${total}条`,
                            pageSize: pageSize,
                            current: pageNum,
                            total,
                            onShowSizeChange: (current, pageSize) => this.changePageSize(pageSize, current),
                            onChange: (current) => this.changePage(current),
                        }}
                    />
                </div>
                <PreviewOrder ref={this.previewOrderRef}/>
            </CustomLayout>
        );
    }
}

export default CompletedOrders;